<template>
  <div class="tools">
    <Header class="head-nft-creator" />
    <div class="tools__theme">
      <div class="wrapper">
        <ChainList
          :chain-code="chainCode"
          :chain-list="chainList"
          @select="select"
        />
      </div>
    </div>
    <div class="tools__main">
      <div class="rpc">
        <div class="rpc__name">
          <span>{{ chainName }}</span>
        </div>
        <div class="rpc__tips">
          <span
            >Follow this <a href="#">guide</a> to change RPC endpoint's of
            {{ chainName }}</span
          >
        </div>
        <div class="rpc__list">
          <table>
            <thead>
              <tr>
                <th>RPC Server Address</th>
                <th>Height</th>
                <th>Latency</th>
                <th>Score</th>
                <th>Privacy</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in rpcList" :key="i">
                <td>
                  <div>{{ item.url }}</div>
                </td>
                <td>17212539</td>
                <td>0.369s</td>
                <td>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="#43DB14"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </td>
                <td>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="#43DB14"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </td>
                <td>
                  <div class="button g-clickable">
                    <span>Copy Url</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import ChainList from "@/components/ChainList";
import { generateChainData } from "@/api/chain.js";
import { getChainMap } from "@/config/chain";
import IconEmpty from "@/assets/chain/empty.svg";

export default {
  components: {
    Header,
    ChainList,
  },
  data() {
    return {
      chainCode: "ethereum",
      chainName: "Ethereum Mainnet",
      chainList: [],
      chainMap: getChainMap(),
      chain: {},
    };
  },
  computed: {
    rpcList() {
      const { rpc } = this.chain;
      return rpc || [];
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      const result = await generateChainData();
      this.$set(
        this,
        "chainList",
        result.map((item) => {
          const { name, chainId, chainSlug } = item;
          const { chainIcon } = this.chainMap[chainId] || {};
          return {
            chainCode: chainSlug,
            chainName: name,
            chainIcon: chainIcon || IconEmpty,
            ...item,
          };
        })
      );
      this.chain = this.chainList.find((item) => {
        return item.chainCode === this.chainCode;
      });
    },
    select(val) {
      const { chainCode, chainName } = val;
      this.chainCode = chainCode;
      this.chainName = chainName;
      this.$set(this, "chain", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.tools {
  position: relative;
  width: 100vw;
  display: flex;
  background-color: #14161a;

  &__main {
    height: 100vh;
    flex: 1;
  }

  .wrapper {
    padding-top: 72px;
    height: 100vh;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
  }

  .rpc {
    width: 60vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    margin: 0 auto;

    &__name {
      margin-top: 120px;
      span {
        font-size: 42px;
        font-family: "Roboto Bold";
        color: var(--color);
      }
    }

    &__tips {
      margin: 15px 0 40px;
      span {
        font-size: 16px;
        line-height: 24px;
        color: var(--color-content);
      }

      a {
        color: var(--color);
        text-decoration: underline;
      }
    }

    &__list {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;

      table {
        border-collapse: collapse;
        width: 100%;
        tbody tr,
        thead {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
      }

      thead {
        tr {
          line-height: 56px;
        }

        th {
          font-size: 16px;
          color: var(--color-content);
          font-family: "Roboto Medium";
          text-align: center;
          background: rgba(255, 255, 255, 0.1);

          &:first-child {
            text-align: left;
            padding-left: 10px;
            width: 30%;
          }

          &:last-child {
            text-align: right;
            padding-right: 10px;
          }
        }
      }
      tbody {
        display: block;
        max-height: 50vh;
        overflow: auto;
        margin-right: -10px;
        padding-right: 10px;

        tr {
          line-height: 52px;
          &:nth-child(2n) {
            background: rgba(255, 255, 255, 0.05);
          }
        }

        td {
          font-size: 14px;
          color: var(--color);
          text-align: center;

          div {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &:first-child {
            text-align: left;
            padding-left: 10px;
            width: 30%;
          }

          &:last-child {
            text-align: right;
            padding-right: 10px;
          }

          svg {
            width: 16px;
          }
        }
      }
    }
  }
}
</style>
